<script type="text/x-template" id="large-radio-button-with-description">
    <div v-bind:class="['bu-level-item','cly-vue-push-notification-large-radio-button-with-description__container','bu-pr-1']">
        <el-radio :style="{height: calculatedHeight, width: '100%'}" :label="label"  border class="cly-vue-push-notification-large-radio-button-with-description__button" v-model="innerValue"> 
            <div class="cly-vue-push-notification-large-radio-button-with-description__title bu-mt-2">
            <span>{{title}}</span>
            <cly-tooltip-icon
                v-if="tooltip"
                style="margin-bottom: 1px"
                :tooltip="tooltip" 
                icon="ion ion-help-circled"> 
            </cly-tooltip-icon>
            </div>
            <div class="cly-vue-push-notification-large-radio-button-with-description__content bu-level bu-is-justify-content-flex-start bu-is-align-items-baseline bu-ml-5 bu-mt-2 font-weight-normal"> 
                <slot v-if="hasDefaultSlot"></slot>      
                <template v-if="description"><span>{{description}}</span></template>               
            </div>
        </el-radio>
    </div>
</script>

<script type="text/x-template" id="line-radio-button-with-description">
    <el-radio :label="label" :disabled="disabled"  :border="border" v-bind:class="['bu-my-1','bu-is-flex','bu-is-align-items-center', border?'cly-vue-push-notification-line-radio-button-with-description__border':'cly-vue-push-notification-line-radio-button-with-description__no-border']" v-model="innerValue">
        <div class="bu-is-flex bu-is-justify-content-space-between">
            <div class="cly-vue-push-notification-line-radio-button-with-description__title">{{title}}</div>
            <div v-if="description" class="cly-vue-push-notification-line-radio-button-with-description__content"> {{description}}</div> 
        </div>
    </el-radio>
</script>

<script type="text/x-template" id="message-setting-element">
    <div class="cly-vue-drawer-step__section">
        <div class="cly-vue-drawer-step__line cly-vue-drawer-step__line--aligned">
            <div class="cly-vue-push-notification-drawer__input-label">
                {{label}}
                <div class="cly-vue-push-notification-drawer__input-description">{{description}}</div>
            </div>
            <div>
                <el-switch :value="toggle" @change="onToggle"></el-switch>
            </div>
        </div>
        <form>
        <slot v-if="hasDefaultSlot && toggle"></slot>
        <template v-else> 
            <validation-provider v-slot="validation" v-if="toggle" :rules="rules">
                <el-input :value="input" @input="onInput" :placeholder="placeholder" :class="{'is-error': validation.errors.length > 0}" autocomplete="off"></el-input>
            </validation-provider>
        </template>
        </form>
    </div>
</script>

<script type="text/x-template" id="review-section-row">
    <div class="bu-level bu-my-2 bu-is-justify-content-flex-start bu-is-align-items-flex-start">
        <div class="bu-is-flex-grow-0 bu-is-justify-content-flex-start cly-vue-push-notification-review-section-row__label">
            {{label}}
        </div>
        <div class="bu-is-justify-content-flex-start cly-vue-push-notification-review-section-row__value">
            <template v-if="value">
                <component :is="usePre?'pre':'div'">{{value}} </component>
            </template>
            <slot v-if="hasDefaultSlot"></slot>      
        </div>
    </div>
</script>

<script type="text/x-template" id="add-user-property-popover">
    <div ref="addUserPropertyPopover">
        <form>
        <div v-if="isOpen" v-bind:style="getStyleObject" class="cly-vue-push-notification-add-user-property-popover">
            <div class="cly-vue-push-notification-add-user-property-popover__inner">
                <div class="cly-vue-push-notification-add-user-property-popover__title">{{i18n('push-notification.add-user-property')}}</div>
                <div class="bu-is-flex bu-is-align-items-center bu-mb-5">
                    <el-radio-group v-model="selectedPropertyCategory" size="small">
                        <el-radio-button v-for="item in propertyCategoryOptions" :label="item.value" :key="item.value">
                            {{item.label}}
                        </el-radio-button>
                    </el-radio-group>
                </div>
                <validation-observer ref="validationObserver">
                    <template v-if="selectedPropertyCategory === 'external'">
                        <div class="bu-level bu-is-flex-direction-column bu-is-align-items-flex-start bu-mb-4">
                            <div class="bu-py-1 bu-my-1 cly-vue-push-notification-drawer__input-label">{{i18n('push-notification.api-property')}}</div>
                            <validation-provider vid="apiValueValidator" v-slot="validation" rules="required" style="width:100%">
                                <el-input :value="userProperty.value" @input="onInput" :placeholder="i18n('push-notification.enter-value')" :class="{'is-error': validation.errors.length > 0}" autocomplete="off"> </el-input>
                            </validation-provider>
                        </div>
                    </template>
                    <template v-else>
                        <div class="bu-level bu-is-flex-direction-column bu-is-align-items-flex-start bu-mb-4">
                            <div class="bu-py-1 bu-my-1 cly-vue-push-notification-drawer__input-label">Property</div>
                            <validation-provider vid="userPropertyValidator" v-slot="validation" rules="required">
                                <cly-select-x
                                    :search-placeholder="i18n('push-notification.search-in-properties')"
                                    :placeholder="i18n('push-notification.select-property')" 
                                    :value="userProperty.value"
                                    :width="320"
                                    @change="onSelect"
                                    mode="single-list"
                                    :hide-all-options-tab="false"
                                    :options="options"
                                    :class="[validation.errors.length > 0 ? 'is-error': null,'cly-vue-push-notification-add-user-property-popover__select-value']">
                                </cly-select-x>
                            </validation-provider>
                        </div>
                    </template>
                    <div>
                        <el-checkbox :value="userProperty.isUppercase" @change="onUppercase" class="bu-mb-4">
                            <div class="bu-py-1 bu-my-1 cly-vue-push-notification-drawer__input-label">{{i18n('push-notification.start-with-capital-letter')}}</div>
                        </el-checkbox> 
                    </div>
                    <div>
                        <div class="bu-level bu-is-flex-direction-column bu-is-align-items-flex-start">
                            <div class="bu-py-1 bu-my-1 cly-vue-push-notification-drawer__input-label">{{i18n('push-notification.fallback-value')}}</div>
                            <validation-provider vid="fallbackValueValidator" v-slot="validation" :rules="{push_notification_fallback:true}" style="width:100%">
                                <el-input v-tooltip="i18n('push-notification.fallback-value-desc')" :value="userProperty.fallback" @input="onFallback" placeholder="Enter fallback value" :class="{'is-error': validation.errors.length > 0}" autocomplete="off"> </el-input>
                            </validation-provider>
                        </div>
                    </div>
                </validation-observer>
                <div class="cly-vue-drawer-step__section cly-vue-drawer-step__line--aligned bu-is-justify-content-flex-end">
                    <el-button type="default" @click="onRemove">{{i18n('common.cancel')}}</el-button>
                    <el-button type="success" @click="onClose">{{i18n('push-notification.confirm')}}</el-button>
                </div>
            </div>
        </div>
        </form>
    </div>
</script>

<script type="text/x-template" id="mobile-message-preview">
    <div class="cly-vue-push-notification-mobile-preview">
        <div class="cly-vue-push-notification-mobile-preview__images">
            <img v-if="isIOSPlatformSelected" src="/images/push/preview.i.png" />
            <img v-else-if="isAndroidPlatformSelected" src="/images/push/preview.a.png" />
        </div>
    
        <div v-if="isIOSPlatformSelected" class="cly-vue-push-notification-mobile-preview__ios-message">
            <div class="cly-vue-push-notification-mobile-preview__ios-header">
                <img class="cly-vue-push-notification-mobile-preview__ios-header-image" src="/appimages/5ea4bd674bb4a33298a81727.png" />
                <span class="cly-vue-push-notification-mobile-preview__ios-header-app-name">
                    {{appName}}
                </span>
                <span class="cly-vue-push-notification-mobile-preview__ios-header-close-button">
                    X
                </span>
            </div>
            <template v-if="isVideo(mediaPreview[PlatformEnum.IOS].type)">
                <video v-bind:src="mediaPreview[PlatformEnum.IOS].url" class="cly-vue-push-notification-mobile-preview__ios-media" controls> </video>
            </template>
            <template v-else>
                <img v-if="mediaPreview[PlatformEnum.IOS].url || mediaPreview[PlatformEnum.ALL].url" class="cly-vue-push-notification-mobile-preview__ios-media" v-bind:src="mediaPreview[PlatformEnum.IOS].url || mediaPreview[PlatformEnum.ALL].url" /> 
            </template>
            <div class="cly-vue-push-notification-mobile-preview__ios-title">
                <template v-for="(component) in titlePreviewComponentsList">
                    <keep-alive>
                        <component v-bind:is="component.name" :value="component.value"></component>
                    </keep-alive>
                </template>
            </div>
            <div class="cly-vue-push-notification-mobile-preview__ios-title">
                <span> {{subtitle}}  </span>
            </div>
            <div class="cly-vue-push-notification-mobile-preview__ios-content">
                <template v-for="(component) in contentPreviewComponentsList">
                    <keep-alive>
                        <component v-bind:is="component.name" :value="component.value"></component>
                    </keep-alive>
                </template>
            </div>
            <div class="cly-vue-push-notification-mobile-preview__ios-buttons-list">
                <div v-for="button in buttons" class="cly-vue-push-notification-mobile-preview__ios-button">{{button}}</div>
            </div>
        </div>
        <div v-else-if="isAndroidPlatformSelected" class="cly-vue-push-notification-mobile-preview__android-message">
            <div class="cly-vue-push-notification-mobile-preview__android-header">
                <img class="cly-vue-push-notification-mobile-preview__android-header-image" src="/appimages/5ea4bd674bb4a33298a81727.png" />
                <span class="cly-vue-push-notification-mobile-preview__android-header-app-name">
                    {{appName}}
                </span>
                <span class="cly-vue-push-notification-mobile-preview__android-header-time">
                    {{timeNow()}}
                </span>
            </div>
            <div class="cly-vue-push-notification-mobile-preview__android-title">
                <template v-for="(component) in titlePreviewComponentsList">
                    <keep-alive>
                        <component v-bind:is="component.name" :value="component.value"></component>
                    </keep-alive>
                </template>
            </div>
            <div class="cly-vue-push-notification-mobile-preview__android-content">
                <template v-for="(component) in contentPreviewComponentsList">
                    <keep-alive>
                        <component v-bind:is="component.name" :value="component.value"></component>
                    </keep-alive>
                </template>
            </div>
            <div class="cly-vue-push-notification-mobile-preview__android-buttons-list">
                <div v-for="button in buttons" class="cly-vue-push-notification-mobile-preview__android-button">{{button}}</div>
            </div>
            <img v-if="mediaPreview[PlatformEnum.ANDROID].url || mediaPreview[PlatformEnum.ALL].url" v-bind:src="mediaPreview[PlatformEnum.ANDROID].url||mediaPreview[PlatformEnum.ALL].url" class="cly-vue-push-notification-mobile-preview__android-media" /> 
        </div>
    
        <div class="cly-vue-push-notification-mobile-preview__platforms">
            <el-radio-group v-model="selectedPlatform" @change="onPlatformChange">
                <el-radio-button v-if="hasAndroidPlatform" :key="PlatformEnum.ANDROID" :label="PlatformEnum.ANDROID">{{i18n('push-notification.android')}}</el-radio-button>
                <el-radio-button v-if="hasIOSPlatform" :key="PlatformEnum.IOS" :label="PlatformEnum.IOS">{{i18n('push-notification.ios')}}</el-radio-button>
            </el-radio-group>
        </div>
    </div>
</script>

<script type="text/x-template" id="emoji-picker">
    <div>
        <slot name="emoji-invoker" :events="{ click: function(e){toggle(e)} }"></slot>
        <div v-if="display.visible" v-click-outside="hide">
            <slot name="emoji-picker" :emojis="emojis" :insert="insert" :display="display"></slot>
        </div>
    </div>
</script>

<script type="text/x-template" id="message-editor-with-emoji-picker" class="cly-vue-push-notification-message-editor-with-emoji-picker">
    <div class="cly-vue-push-notification-emoji-wrapper" style="position:relative;">
        <validation-provider ref="defaultLocalizationValidationProvider" v-slot="validation" :rules="isRequired?'required':null"> </validation-provider>
        <div :class="['el-input',hasValidationErrors?'is-error':null]" style="display:block;" @click="onClick">
            <component 
                is="div" 
                :class="['el-input__inner',container==='title'?'cly-vue-push-notification-message-editor-with-emoji-picker__title':'cly-vue-push-notification-message-editor-with-emoji-picker__content']" 
                v-bind:id="id" 
                contenteditable="true" 
                ref="element" 
                @input="onInput($event.target.innerHTML)" 
                @keydown.enter.prevent>
            </component>
        </div>
        <add-user-property-popover
            :width="350"
            :isOpen="isOpen"
            :container="container"
            :userProperty="userProperty"
            :options="options"
            :position="position"
            @select="onSelectUserProperty"
            @input="onInputUserProperty"
            @fallback="onInputFallbackUserProperty"
            @uppercase="onCheckUppercaseUserProperty"
            @remove="onRemoveUserProperty"
            @close="closeAddUserPropertyPopover"
        >
        </add-user-property-popover>
        <emoji-picker @emoji="appendEmoji" :search="search">
            <template  v-slot:emoji-invoker ="{ events: { click: clickEvent } }">   
                <div class="emoji-invoker" @click.stop="clickEvent">
                    <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                        <path d="M0 0h24v24H0z" fill="none"/>
                        <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/>
                    </svg>
                </div>
            </template>
            <template v-slot:emoji-picker="{ emojis, insert, display }">
                <div class="emoji-picker">
                    <div class="emoji-picker__search">
                        <input type="text" v-model="search">
                    </div>
                    <div>
                        <div v-for="(emojiGroup, category) in emojis" :key="category">
                            <h5>{{ category }}</h5>
                            <div class="emojis">
                                <span
                                    v-for="(emoji, emojiName) in emojiGroup"
                                    :key="emojiName"
                                    @click="insert(emoji)"
                                    :title="emojiName"
                                >{{ emoji }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </emoji-picker>
    </div>
</script>

<script type="text/x-template" id="details-tab-row">
    <div class="bu-level bu-mb-4 bu-is-justify-content-flex-start bu-is-align-items-flex-start">
        <div class="bu-is-flex-grow-0 bu-is-justify-content-flex-start cly-vue-push-notification-details-summary__label">
            {{label}}
        </div>
        <div class="bu-is-justify-content-flex-start cly-vue-push-notification-details-summary__value" v-if="value">
            <template v-if="label && label.length && label.toLowerCase().includes('url') && value.length > 1">
                <a class="color-blue-100 font-weight-bold" :href="value" target="_blank">{{ value }}</a>
            </template>
            <template v-else>
                <component :is="usePre ? 'pre' : 'div'">{{ value }}</component>
            </template>
            <slot v-if="hasDefaultSlot"></slot>      
        </div>
    </div>
</script>

<script type="text/x-template" id="details-message-tab">
    <el-card class="box-card cly-vue-push-notification-details-summary-card">
        <template v-if="pushNotification.messageType === MessageTypeEnum.CONTENT">
            <div slot="header" class="clearfix">
                <span class="bu-mr-1 color-cool-gray-50 font-weight-bold text-small">{{i18n('push-notification-details.localization-filter-label')}}</span>
                <el-select v-model="selectedMessageLocale">
                    <el-option v-for="item in localizations" :key="item.value" :value="item.value" :label="item.label">
                    </el-option>
                </el-select>
            </div>
            <div class="bu-p-1">
                <div class="bu-level bu-mb-4 bu-is-justify-content-flex-start bu-is-align-items-flex-start">
                    <div class="bu-is-flex-grow-0 bu-is-justify-content-flex-start cly-vue-push-notification-details-summary__label">
                        {{i18n('push-notification-details.message-title')}}
                    </div>
                    <div class="bu-is-justify-content-flex-start cly-vue-push-notification-details-summary__value">
                        <template v-if="previewMessageTitle.length">
                            <template v-for="(component) in previewMessageTitle">
                                <keep-alive>
                                    <component v-bind:is="component.name" :value="component.value"></component>
                                </keep-alive>
                            </template>    
                        </template>
                        <template v-else>
                            <span>-</span> 
                        </template>
                    </div>
                </div>
                <div v-if="selectedMobileMessagePlatform === PlatformEnum.IOS && subtitle" class="bu-level bu-mb-4 bu-is-justify-content-flex-start bu-is-align-items-flex-start">
                    <div class="bu-is-flex-grow-0 bu-is-justify-content-flex-start cly-vue-push-notification-details-summary__label">
                        {{i18n('push-notification.subtitle')}}
                    </div>
                    <div class="bu-is-justify-content-flex-start cly-vue-push-notification-details-summary__value">
                        <span>{{subtitle}}</span>   
                    </div>
                </div>
                <div class="bu-level bu-mb-4 bu-is-justify-content-flex-start bu-is-align-items-flex-start">
                    <div class="bu-is-flex-grow-0 bu-is-justify-content-flex-start cly-vue-push-notification-details-summary__label">
                        {{i18n('push-notification-details.message-content')}}
                    </div>
                    <div class="bu-is-justify-content-flex-start cly-vue-push-notification-details-summary__value">
                        <template v-if="previewMessageContent.length">
                            <template v-for="(component) in previewMessageContent">
                                <keep-alive>
                                    <component v-bind:is="component.name" :value="component.value"></component>
                                </keep-alive>
                            </template>    
                        </template>
                        <template v-else>
                            <span>-</span>
                        </template>
                    </div>
                </div>
                <template v-if="message.buttons && message.buttons.length>0">
                    <template v-for="(button,index) in message.buttons">
                        <details-tab-row :label="index === 0?i18n('push-notification-details.message-first-button-label'):i18n('push-notification-details.message-second-button-label')" :value="button.label"></details-tab-row>
                        <details-tab-row :label="index === 0?i18n('push-notification-details.message-first-button-url'):i18n('push-notification-details.message-second-button-url')" :value="button.url"></details-tab-row>
                    </template>
                </template>
                <details-tab-row v-if="hasAllPlatformMediaOnly" :label="i18n('push-notification-details.message-media-url')" :value="this.pushNotification.settings[this.PlatformEnum.ALL].mediaURL || '-'"> </details-tab-row>
                <template v-else>
                    <div v-for="platform in platformsForSummary">
                        <div class="bu-py-4 text-big font-weight-bold bu-is-capitalized"> {{i18n('push-notification-details-platform-settings', platform)}} </div>
                        <details-tab-row v-if="pushNotification.settings[platform].subtitle" :label="i18n('push-notification.subtitle')" :value="pushNotification.settings[platform].subtitle"></details-tab-row>
                        <details-tab-row v-if="pushNotification.settings[platform].mediaURL" :label="i18n('push-notification-details.message-media-url')" :value="pushNotification.settings[platform].mediaURL"></details-tab-row>
                        <details-tab-row v-if="pushNotification.settings[platform].mediaMime" :label="i18n('push-notification-details.message-media-mime')" :value="pushNotification.settings[platform].mediaMime"></details-tab-row>
                        <details-tab-row v-if="pushNotification.settings[platform].soundFilename" :label="i18n('push-notification.sound-file-name')" :value="pushNotification.settings[platform].soundFilename"></details-tab-row>
                        <details-tab-row v-if="pushNotification.settings[platform].badgeNumber" :label="i18n('push-notification.badge-number')" :value="pushNotification.settings[platform].badgeNumber"></details-tab-row>
                        <details-tab-row v-if="pushNotification.settings[platform].onClickURL" :label="i18n('push-notification.on-click-url')" :value="pushNotification.settings[platform].onClickURL"></details-tab-row>
                        <details-tab-row v-if="pushNotification.settings[platform].json" :label="i18n('push-notification.json-data')" :value="pushNotification.settings[platform].json"></details-tab-row>
                        <details-tab-row v-if="pushNotification.settings[platform].userData && pushNotification.settings[platform].userData.length" :label="i18n('push-notification.user-data')" :value="pushNotification.settings[platform].userData.join(', ')"></details-tab-row>
                    </div>
                </template>
            </div>
        </template>
        <template v-if="pushNotification.messageType === MessageTypeEnum.SILENT">
            <div>
                <details-tab-row :label="i18n('push-notification.ios-badge-number-setting')" :value="pushNotification.settings[PlatformEnum.IOS].badgeNumber"> </details-tab-row>
                <details-tab-row :label="i18n('push-notification.ios-json-data-setting')" :value="prettifyJSON(pushNotification.settings[PlatformEnum.IOS].json)"  :usePre="true"> </details-tab-row>
                <details-tab-row :label="i18n('push-notification.ios-user-data-setting')" :value="pushNotification.settings[PlatformEnum.IOS].userData.join(', ')"> </details-tab-row>
                <details-tab-row :label="i18n('push-notification.android-badge-number-setting')" :value="pushNotification.settings[PlatformEnum.ANDROID].badgeNumber"> </details-tab-row>
                <details-tab-row :label="i18n('push-notification.android-json-data-setting')" :value="prettifyJSON(pushNotification.settings[PlatformEnum.ANDROID].json)"  :usePre="true"> </details-tab-row>
                <details-tab-row :label="i18n('push-notification.android-user-data-setting')" :value="pushNotification.settings[PlatformEnum.ANDROID].userData.join(', ')"> </details-tab-row>
            </div>
        </template>
    </el-card>
</script>

<script type="text/x-template" id="details-targeting-tab">
    <el-card class="box-card cly-vue-push-notification-details-summary-card">
        <div class="bu-p-1">
            <template v-if="pushNotification.type === TypeEnum.ONE_TIME || pushNotification.type === TypeEnum.AUTOMATIC || pushNotification.type === TypeEnum.RECURRING  || pushNotification.type === TypeEnum.MULTIPLE"> 
                <div class="cly-vue-push-notification-details-summary__header bu-mt-1 bu-mb-4" >
                    {{i18n('push-notification-details.targeting-sub-header')}}
                </div>
                <div class="bu-pb-4">
                    <template v-if="pushNotification.type === TypeEnum.ONE_TIME || pushNotification.type === TypeEnum.RECURRING || pushNotification.type === TypeEnum.MULTIPLE">
                        <template v-if="pushNotification[pushNotification.type].targeting === TargetingEnum.ALL">
                            <details-tab-row :label="i18n('push-notification-details.targeted-users')"> 
                                {{targetingOptions[pushNotification[pushNotification.type].targeting].label}}
                            </details-tab-row>
                        </template>
                        <template v-else>
                            <details-tab-row :label="i18n('push-notification-details.targeted-users')"> 
                                <div class="bu-is-flex bu-is-flex-direction-column">
                                    <template v-if="cohorts.length">
                                        <div class="bu-level" v-for="cohortName in previewCohorts">
                                            {{cohortName}}
                                        </div>
                                    </template>
                                    <template v-else> <span>-</span> </template>
                                </div>
                            </details-tab-row>
                            <details-tab-row :label="i18n('push-notification-details.geolocation')"> 
                                <div class="bu-is-flex bu-is-flex-direction-column">
                                    <template v-if="locations.length">
                                        <div class="bu-level" v-for="locationName in previewLocations">
                                            {{locationName}}
                                        </div>
                                    </template>
                                    <template v-else><span>-</span></template>
                                </div>
                            </details-tab-row>
                        </template>
                        <details-tab-row 
                            v-if="pushNotification.type === TypeEnum.ONE_TIME || pushNotification.type === TypeEnum.RECURRING" 
                            :label="i18n('push-notification-details.when-to-determine')" 
                            :value="audienceSelectionOptions[pushNotification[pushNotification.type].audienceSelection].label"> 
                        </details-tab-row>
                    </template>
                    <template v-if="pushNotification.type === TypeEnum.AUTOMATIC">
                        <details-tab-row :label="i18n('push-notification.trigger-type')" :value="triggerOptions[pushNotification.automatic.trigger].label"> </details-tab-row>
                        <details-tab-row v-if="pushNotification.automatic.trigger === TriggerEnum.EVENT" :label="i18n('push-notification.events')">
                            <div class="bu-is-flex bu-is-flex-direction-column">
                                <div class="bu-level" v-for="eventName in pushNotification.automatic.events">
                                    {{eventName}}
                                </div>
                            </div>
                        </details-tab-row>
                        <details-tab-row v-else :label="i18n('push-notification.cohorts')">
                            <div class="bu-is-flex bu-is-flex-direction-column">
                                <div class="bu-level" v-for="cohortName in previewCohorts">
                                    {{cohortName}}
                                </div>
                            </div>
                        </details-tab-row>
                        <details-tab-row :label="i18n('push-notification.geolocations')">
                            <div class="bu-is-flex bu-is-flex-direction-column">
                                <template v-if="locations.length">
                                    <div class="bu-level" v-for="locationName in locations">
                                        {{locationName}}
                                    </div>
                                </template>
                                <template><span>-</span></template>
                            </div>
                        </details-tab-row>
                        <details-tab-row v-if="pushNotification.automatic.trigger === TriggerEnum.EVENT" :label="i18n('push-notification.delivery-date-calculation')" :value="deliveryDateCalculationOptions[pushNotification.automatic.deliveryDateCalculation].label"></details-tab-row>
                        <details-tab-row v-else :label="i18n('push-notification.behavior-trigger-not-met')" :value="triggerNotMetOptions[pushNotification.automatic.triggerNotMet].label"></details-tab-row>
                    </template>
                </div>
            </template>
            <div class="cly-vue-push-notification-details-summary__header bu-mt-1 bu-mb-4">
                {{i18n('push-notification-details.delivery-sub-header')}}
            </div>
            <div>
                <template v-if="pushNotification.type === TypeEnum.ONE_TIME">
                    <details-tab-row :label="i18n('push-notification.delivery-type')" :value="startDateOptions[pushNotification.delivery.type].label"> </details-tab-row>
                    <details-tab-row :label="i18n('push-notification-details.scheduled-for')" :value="formatDateAndTime(pushNotification.delivery.startDate)"> </details-tab-row>
                    <details-tab-row :label="i18n('push-notification-details.expiration-time')" :value="i18n('push-notification-details.message-expires-after', pushNotification.expiration.days, pushNotification.expiration.hours)"> </details-tab-row>
                </template>
                <template v-if="pushNotification.type === TypeEnum.AUTOMATIC || pushNotification.type === TypeEnum.TRANSACTIONAL">
                    <details-tab-row :label="i18n('push-notification.delivery-timeframe')" :value="startDateOptions[pushNotification.delivery.type].label"> </details-tab-row>
                    <details-tab-row :label="i18n('push-notification.start-date')" :value="formatDateAndTime(pushNotification.delivery.startDate)"></details-tab-row>
                    <details-tab-row v-if="pushNotification.type === TypeEnum.AUTOMATIC && pushNotification.delivery.endDate" :label="i18n('push-notification.end-date')" :value="formatDateAndTime(pushNotification.delivery.endDate)"></details-tab-row>
                    <details-tab-row v-if="pushNotification.type === TypeEnum.AUTOMATIC" :label="i18n('push-notification.delivery-method')" :value="deliveryMethodOptions[pushNotification.automatic.deliveryMethod].label"></details-tab-row>
                    <details-tab-row v-if="pushNotification.type === TypeEnum.AUTOMATIC" :label="i18n('push-notification.capping')">
                        <template v-if="pushNotification.automatic.capping">
                            {{i18n('push-notification.maximum-messages',pushNotification.automatic.maximumMessagesPerUser)}} <br />
                            {{i18n('push-notification.minimum-days-and-hours',pushNotification.automatic.minimumTimeBetweenMessages.days,pushNotification.automatic.minimumTimeBetweenMessages.hours)}}
                        </template>
                        <template v-else>
                            {{i18n('push-notification.no-capping')}} <br />
                        </template>
                    </details-tab-row>
                </template>
                <template v-if="pushNotification.type === TypeEnum.RECURRING">
                    <details-tab-row :label="i18n('push-notification-drawer.rec-push-start-date')" :value="formatDateAndTime(pushNotification.delivery.startDate)"> </details-tab-row>
                    <details-tab-row v-if="pushNotification.delivery.endDate" :label="i18n('push-notification.end-date')" :value="formatDateAndTime(pushNotification.delivery.endDate)"> </details-tab-row>
                    <details-tab-row :label="i18n('push-notification-drawer.notification-frequency')" :value="pushNotification.delivery.repetition.bucket"> </details-tab-row>
                    <details-tab-row :label="i18n('push-notification-drawer.repetition-for-every')" :value="pushNotification.delivery.repetition.every"> </details-tab-row>
                    <details-tab-row v-if="pushNotification.delivery.repetition.on.length" :label="i18n('push-notification-drawer.repeat-on')" :value="pushNotification.delivery.repetition.on"> </details-tab-row>
                    <details-tab-row :label="i18n('push-notification-drawer.repeat-at')" :value="formatDateTime(pushNotification.delivery.repetition.at, 'HH:mm a')"></details-tab-row>
                    <details-tab-row v-if="pushNotification.delivery.prev || pushNotification.delivery.last" :label="i18n('push-notification.next-delivery-dates')" :value="calculateDeliveryDates(pushNotification.delivery.prev, pushNotification.delivery.last)"></details-tab-row>
                </template>
                <template v-if="pushNotification.type === TypeEnum.MULTIPLE">
                    <details-tab-row :label="i18n('push-notification.delivery-dates')" :value="formatDateAndTime(pushNotification.delivery.multipleDates, 'HH:mm a', true)"></details-tab-row>
                    <details-tab-row :label="i18n('push-notification.delivery-type')" :value="startDateOptions[pushNotification.delivery.type].label"> </details-tab-row>
                    <details-tab-row :label="i18n('push-notification-details.scheduled-for')" :value="formatDateAndTime(pushNotification.delivery.startDate)"> </details-tab-row>
                    <details-tab-row :label="i18n('push-notification-details.expiration-time')" :value="i18n('push-notification-details.message-expires-after', pushNotification.expiration.days, pushNotification.expiration.hours)"></details-tab-row>
                    <details-tab-row v-if="pushNotification.delivery.prev || pushNotification.delivery.last" :label="i18n('push-notification.next-delivery-dates')" :value="calculateDeliveryDates(pushNotification.delivery.prev, pushNotification.delivery.last)"></details-tab-row>
                </template>
            </div>
        </div>
    </el-card>
</script>

<script type="text/x-template" id="details-errors-tab">
    <el-card class="box-card cly-vue-push-notification-details-summary-card">
        <div>
            <el-table
                :empty-text="i18n('push-notification.no-errors-found')"
                :data="errors"
                border
                style="width:100%">
                    <el-table-column type="expand">
                        <template slot-scope="scope">
                            <div class="bu-level bu-mb-4 bu-is-flex bu-is-flex-direction-column bu-is-align-items-flex-start">
                                <div class="bu-level-left text-medium font-weight-bold">
                                    <span class="text-small font-weight-bold text-uppercase bu-mb-2 bu-ml-5">{{i18n('push-notification.error-detail')}}</span>
                                </div>
                                <div class="white-bg cly-vue-push-notification-details-expand-row">
                                    <p class="bu-ml-5">{{scope.row.description || '-'}}</p>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        :label="i18n('push-notification.error-code')"
                        min-width="30">
                        <template v-slot="scope">
                         <span style="white-space:normal">{{scope.row.code}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        :label="i18n('push-notification.affected-users')"
                        prop="affectedUsers"
                        min-width="25">
                    </el-table-column>
            </el-table>
        </div>
    </el-card>
</script>

